import React from 'react'
import ResizeTable from 'components/resize-table'
import {Tooltip} from "antd";

export default {
  key: 'resize-table',
  name: 'ResizeTable 可伸缩表格',
  author: '张然',
  description: '表格表头可通过拖拽进行伸缩。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'onResize', description: '当拖拽表头时的回调。', type: 'function(columns)', defaultValue: '() => {}'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '与::antd::的::Table::用法一致。',
      state: {
        columns: [
          {title: '第一列', dataIndex: 'column1', width: 100},
          {title: '第二列', dataIndex: 'column2', width: '20%'},
          {title: '第三列', dataIndex: 'column3', render: data => <Tooltip title={data}>render: {data}</Tooltip>},
          {title: '第四列', dataIndex: 'column4', width: '150px'},
          {title: '第五列', dataIndex: 'column5'},
          {title: '第六列', dataIndex: 'column6'}
        ],
        dataSource: [
          {column1: '1', column2: '2', column3: '3', column4: '4', column5: '5', column6: '6', column7: '7', column8: '8'},
          {column1: '11', column2: '22', column3: '33', column4: '44', column5: '55', column6: '66', column7: '77', column8: '88'},
          {column1: '111', column2: '222', column3: '333', column4: '444', column5: '555', column6: '666', column7: '777', column8: '888'}
        ]
      },
      getMethod: context => {
        return {
          handleResize: columns => {
            console.log(columns);
          }
        }
      },
      getContent: context => {
        const { dataSource, columns } = context.state;
        return (
          <div>
           <ResizeTable
             dataSource={dataSource}
             columns={columns}
             onResize={context.handleResize}
           />
          </div>
        )
      }
    }
  ]
}
